<template>
    <div>
      <city-header></city-header>
      <city-search :citys='citys'></city-search>
      <city-list :citys='citys' :hotCitys='hotCitys' :letter='letter'></city-list>
      <city-alphabet :citys='citys' @change='handleLetterChang'></city-alphabet>
    </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './compontents/Header'
import CitySearch from './compontents/Search'
import CityList from './compontents/List'
import CityAlphabet from './compontents/Alphabet'
export default {
  components: {
     CityHeader,
     CitySearch,
     CityList,
     CityAlphabet
  },
  data(){
    return{
      citys:{},
      hotCitys:[],
      letter:''
    }
  },
  mounted () {
    this.getCityInfo()
  },
  methods:{
    getCityInfo (){
      axios.get('api/city.json')
      .then(this.handleGetCityInfo)
    },
    handleGetCityInfo (res){
       res = res.data;
       if(res.ret && res.data){
         const data = res.data
         this.citys = data.cities;
         this.hotCitys = data.hotCities
       }
    },
    handleLetterChang:function(letter){
      this.letter = letter;
    }
  }
}
</script>  

<style lang="stylus" scoped>

</style>